<template>
  <div class="douyin">

    <div class="center">
      <left></left>
      <div class="right">

        <top></top>
        <div class="hei10"></div>
        <div style="padding: 20px; display: flex;">
          产品渠道管理
        </div>
        <div style="margin: 0 20px 20px;">
          <el-button type="danger" @click="xinjian">新建产品渠道管理</el-button>
        </div>

        <div style="margin: 0 20px 20px;">
          <el-input v-model="form.name" style="width: 250px; margin-right: 20px;" placeholder="请输入产品渠道管理"></el-input>
          <el-button type="primary" @click="sousuo()">搜索</el-button>
        </div>

        <div class="con" v-loading="loading"
          style="margin:0 20px; ">

          <el-table :data="list" style="text-align: center;" align="center" border :loading="loading">
            <el-table-column label="产品渠道">
              <template slot-scope="scope">
                <span>{{ scope.row.product_source }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="400px">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-button type="text" @click="xiugai(scope.row)">编辑</el-button>
                  <el-button type="text" @click="deletes(scope.row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 20px; justify-content: flex-end;" class="flexc" >
            <el-pagination style=" text-align: right;" background layout="total,prev, pager, next" :current-page="form.page" @current-change="fanye"
              :page-size="form.pagesize" :total="total"></el-pagination>
          </div>

        </div>
        <el-dialog title="产品渠道管理" :visible.sync="log" width="400px"  :close-on-click-modal="false" :close-on-press-escape="false">

            <el-input v-model="all.product_source" placeholder="请输入产品渠道管理"></el-input>

        	  <span slot="footer" class="dialog-footer">
              <el-button @click="log = false">取消</el-button>
              <el-button type="primary" @click="loggo">确定</el-button>
        	  </span>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>

  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
    },
    name: 'qudaoguanli',
    data() {
      return {
        form: {
          name:"",
          page: 1,
          pagesize: 20,
        },
        loading: true,
        list: "",
        total: 0,
        log:false,
        all:{
          product_source:"",
          id:""
        }
      }
    },
    created() {
      this.getlist()

    },
    methods: {
      sousuo:function(){
        this.form.page = 1
        this.getlist()
      },
      xinjian:function(){
        this.all = {
          product_source:"",
          id:""
        }
        this.log = true
      },
      xiugai:function(item){
        this.all = {
          product_source:item.product_source,
          id:item.id
        }
        this.log = true
      },
      loggo:function(){
        axios.post('/api/plan-market/product/source/make',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist:function(){
        axios.get('/api/plan-market/product/sources2',{params:this.form})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },


      deletes: function(id) {
        this.$confirm('此操作将永久, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/product/source/delete', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '删除成功！',
                  type: 'success'
                });
                this.loading = true
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.form.page = page
        this.getlist()
      },

      //搜索
      search: function() {
        this.form.page = 1
        this.loading = true
        this.getlist()
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
